<template>
	<view class="">
		<view class="imgs-list">
			<view @tap.stop="openImg(item,index)" style="position: relative;" class="imgs-item"
				:style="{width:itemStyle.width,height:itemStyle.height}" v-for="(item,index) in currentImgs"
				:key="index">
				<view v-if="isOpt" :style="item.active?'background: #069cff;':''"  class="d-flex a-center j-center color-fff position-absolute" style="right: 20rpx;top: 10rpx;width: 40rpx;height: 40rpx;border-radius: 50%;border: 1rpx solid #fff;z-index: 999;">
					<view class="" v-if="item.active">
						√
					</view>
				</view>
				<view v-if="item.is_top == 1" class=" position-absolute" style="font-size:20rpx;border-radius: 10rpx 0 10rpx 0;padding: 5px;z-index: 99;color: rgb(255, 255, 255); background: #26a9ff;left: 10rpx;top: 0;">
					置顶
				</view>
				<video v-if="item.img_type == 5" id="myVideo" :src="item.src" enable-danmu danmu-btn controls style="width: 90%;height: 100%; border-radius: 20rpx;background: #ccc;"></video>
				<image v-else :src="item.src" style="width: 90%;height: 100%; border-radius: 20rpx;background: #ccc;" mode="aspectFill">
				</image>

				<view class="" v-if="currentIndex == index" style="position: absolute;">
					<view @tap.stop="stick(item,index)" class="mb-1"
						style="color: #fff; padding: 12rpx 23rpx;border-radius: 20rpx;background: rgba(0, 0, 0, 0.5);">
						{{ item.is_top == 1 ? '取消置顶' : '置顶'}}
					</view>
					<view v-if="item.is_top == 0" class="" @tap="delImg(item,index)"
						style="color: #fff; padding: 12rpx 25rpx;border-radius: 20rpx;background: rgba(0, 0, 0, 0.5);">
						删除
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isOpt:{
				type: Boolean,
				default:false
			},
			itemStyle: {
				type: Object,
				default: () => {}
			},
			currentImgs: {
				type: Array,
				default: () => {}
			}
		},
		mounted() {

		},
		watch:{
			isOpt(newVal,oldVal){
				this.currentIndex = -1
			}
		},
		data() {
			return {
				currentIndex: -1
			}
		},
		methods: {
			// 删除图片
			async tapDelImg(src) {
				uni.showLoading({
					title: "删除中"
				})
				var result = await uniCloud.deleteFile({
					fileList: [src]
				})
				if (result.success) {
					uni.hideLoading()
				}else{
					uni.showToast({
						title:"删除失败",
						icon:"none"
					})
				}
			},
			// 取消置顶 、 置顶
			async stick(item, index) {
				let is_top = item.is_top == 1 ? 0 :1
				var data = await this.$api.setData({
					dbName: "wx_imgs",
					whereJson: {
						framer_id:item.framer_id,
						_id:item._id
					},
					dataJson: {
						is_top:is_top
					}
				})
				this.currentIndex = -1
				this.$emit('stickImg','stick',item,is_top)
			},
			async delImg(item, index) {
				var data = await this.$api.delData({
					dbName: "wx_imgs",
					whereJson: {
						framer_id:item.framer_id,
						_id:item._id
					},
				})
				if(data.code != 0){
					uni.showToast({
						title:"删除失败",
						icon:"none"
					})
					return
				}
				console.log(data,'12121')
				this.currentIndex = -1
				this.tapDelImg(item.src)
				this.$emit('stickImg','del',item,index)
			},
		
			openImg(item, index) {
				if(this.isOpt){
					// 操作选择图片
					this.$emit('stickImg','optImg',item,index)
					// this.optImg(item,index)
					return
				}
				if(index == this.currentIndex){
					this.currentIndex = -1
					return
				}
				this.currentIndex = index
				// 	url:"/pages/common/works-details?id="+item.id || 1
				// })
			}

		}
	}
</script>

<style scoped lang="scss">
	.imgs-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.imgs-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 25%;
			height: 150rpx;
			border-radius: 20rpx;
			margin-bottom: 15rpx;
		}
	}
</style>
